<template>
    <div>
      <div class="bg-white grid-content">
        <div style="overflow: hidden; ">
          <div class="mytitle"><svg-icon icon-class="yjbb" class="myIcon" /> 供用电月报表</div>
          <!-- <div class="myButtons">
            <el-button @click="handleClick('', 'add')">新增</el-button>
            <el-button @click="uploadData">批量导入</el-button>
          </div> -->
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick1">
      <el-tab-pane label="大庆榆树林油田地区供电月报表封面" name="first">
        
        <el-row class="elrow2" >
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p align="center" style="font-size: 40px;">2022年04月份大庆榆树林油田地区供电月报表</p>
            </div>
          </el-col>
        </el-row>
       <div class="big_box">
        <div class="mini_box">
          <el-row class="elrow1" >
            <el-col :span="12"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">编制单位：</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <p>大庆榆树林油田生产运行部</p>
              </div>
            </el-col>
          </el-row>
          <el-row class="elrow1" >
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <p align="right">编  制  人：</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <p >杨帅</p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow1" >
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p align="right">审  核  人：</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <p>李文彬</p>
            </div>
          </el-col>
        </el-row>
        <el-row class="elrow1" >
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p align="right">审  定  人：</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
            <p>朱晶光</p>
            </div>
          </el-col>  
        </el-row>
        <el-row style="font-size: 22px;" >
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p align="right">编制时间：</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <p>2022-05-01</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  
  
      
      </el-tab-pane>
      <el-tab-pane label="(2022年04月份)大庆榆树林油田地区供电月报表" name="second">
        <el-row class="elrow2" >
          <el-col :span="24"  class="kuangdu">
            <div class="grid-content bg-purple-dark">
              <p align="center" style="font-size: 40px;" >(2022年04月份)大庆榆树林油田地区供电月报表</p>
            </div>
          </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="24" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p>一、供电情况</p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">1、地区最高负荷：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>10557KW</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">平均负荷:</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>9824KW</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">最大需量：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>10557KW</p>
              </div>
            </el-col>
          </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">2、地区供电量：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>有功978.3257万千瓦时； 无功178.928万千瓦时</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">自发电量:</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>0.00万千瓦时</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">最大日供电量：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>35.028万千瓦时</p>
              </div>
            </el-col>
          </el-row>
          <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">3、全厂自用电量：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>60.33万千瓦时</p>
              </div>
            </el-col>
          </el-row>
          <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">4、本月负荷率：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>93.06%</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">补偿力率：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>93.06%</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">自然力率:</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>98.01%</p>
              </div>
            </el-col>
          </el-row>
          <el-row class="elrow11" >
            <el-col :span="24" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p>二、运行情况</p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">1、本月继电保护装置正确动作率：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>100.0%</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">正确动作次数：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>4次</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">总动作次数：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p>4次</p>
              </div>
            </el-col>
          </el-row>
          <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p align="right">不正确动作说明：</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu">
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
          </el-row>
          <el-row class="elrow11" >
            <el-col :span="24" class="kuangdu"> 
              <div class="grid-content bg-purple-dark">
                <p>三、变电所及线路缺陷记录:无</p>
              </div>
            </el-col>
        </el-row>
        
  
      </el-tab-pane>
      <el-tab-pane label="2022年04月份大庆榆树林油田地区供电月报表" name="third">
        <el-row class="elrow2" >
          <el-col :span="24" >
            <div class="grid-content bg-purple-dark">
              <p align="center" style="font-size: 40px;">2022年04月份大庆榆树林油田地区供电月报表</p>
            </div>
          </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark">
                <p style="font-weight: bold;">一、供用电情况</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >累计</p>
              </div>
            </el-col>
            <el-col :span="16" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p style="font-weight: bold;">三、电网现状及检修情况</p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >1、最高负荷（兆瓦）</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >10.557</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>（一）变电所</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >数量(座)</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark" >
                <p >主变数(台)/容量(kVA)</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月检修(座)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>累计检修(座)</p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >2、补偿功率因数%</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >98.37</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>1、110kV变电所</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >3、负荷率%</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >98.05</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>2、35KV变电所</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >5</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >9/35450</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="8" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark" >
                <p style="font-weight: bold;">二、电网检修计划</p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >3、开闭所</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p align="center">类别</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月计划检修</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >下月计划检修</p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>（二）线路</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >数量(条)</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >数量(km)</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月检修 (km)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>累计检修(km)</p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >1、110kV变电所(座)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>1、110KV线路</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >2、35KV变电所(座)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>2、35KV线路</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >3、开闭所(座)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>3、6~10KV线路</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >31</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >742.50</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >120</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>182.00</p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >4、110KV线路(km)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>（三）6（10）kV配电变压器</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >数量(台)</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >容量(kVA)</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月检修 (台)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>累计检修(台)</p>
              </div>
            </el-col>
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >5、35KV线路(km)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>1233</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >116990.00</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >85</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >119</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >6、6~10KV线路(km)</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >128</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>128</p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            
        </el-row>
  
        <el-row class="elrow11" >
            <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p style="font-weight: bold; ">四、用电分类</p>
              </div>
            </el-col>
            <el-col :span="4" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >产量（万吨、万方）</p>
              </div>
            </el-col>
            <el-col :span="6" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>电量（万千瓦时）</p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >单耗（千瓦时/吨、方）</p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>备    注</p>
              </div>
            </el-col>
          
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p style="font-weight: bold; ">四、用电分类</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>累计</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>累计</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>累计</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >本月</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>累计</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >（一）油气生产</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >744.601</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>3374.099</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >210.93</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >1、采油</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >3.53</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>14.58</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >352.254</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>1582.403</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >99.79</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >其中在油田公司外部转供电量中：</p>
              </div>
            </el-col>
           
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >2、集输</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >3.53</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>14.58</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >352.254</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>1582.403</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >99.79</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >转供大庆炼化公司电量</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >3、储运</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >0.00</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>0.00</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >4、注水</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >3.53</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>14.58</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >352.254</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>1582.403</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >99.79</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >转供大庆炼化公司电量</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >5、供水</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >0.00</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>0.00</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >6、天然气</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >3.53</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>14.58</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >0.000</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >转供中石油昆仑燃气电量</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >7、注聚</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >0.00</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>0.00</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >8、网损</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >3.53</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>14.58</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >0.000</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p ></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >转供中石油黑龙江大庆销售分公司电量</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >（二）非油气生产</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >60.330</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>278.072</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >0.00</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>0.00</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >（一）（二）油公司合计</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >804.931</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>3652.171</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >228.02</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p style="margin:0px" >转供中国石油天然气管道局大庆输油气分公司电量</p>
                <!-- style="margin:0px" align="center" -->
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >（三）转供电量</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >60.330</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>278.072</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >0.00</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>0.00</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >1、油田公司内部</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >804.931</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>3652.171</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >228.02</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="5" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p  align="center"> 合计</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >2、油田公司外部</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >60.330</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>278.072</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >当月电量</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>累计电量</p>
              </div>
            </el-col>
            
        </el-row>
        <el-row class="elrow11" >
          <el-col :span="4" class="kuangdu3" > 
              <div class="grid-content bg-purple-dark" >
                <p >（一）（二）（三）总计</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >60.330</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>278.072</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >/</p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p></p>
              </div>
            </el-col>
            <el-col :span="3" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p >0</p>
              </div>
            </el-col>
            <el-col :span="2" class="kuangdu3"> 
              <div class="grid-content bg-purple-dark">
                <p>0</p>
              </div>
            </el-col>
            
        </el-row>
  
      </el-tab-pane>
      <el-tab-pane label="2022年04月份大庆榆树林油田地区供电月报表" name="fourth">
        
      </el-tab-pane>
      <el-tab-pane label="(2022年04月份)变电所运行情况分析表" name="fiveth"></el-tab-pane>
    </el-tabs>
      
        <!-- 表格 -->
      
        <!-- 分页器 -->
        <!-- <el-pagination align='right'
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :current-page="currentPage"
            :page-sizes="[1,5,10,20,30]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
        </el-pagination> -->
      </div>
  
      <!-- 弹出框 -->
      <el-dialog :title="myDialogTitle" :visible.sync="dialogFormVisible" :before-close="handleClose">
  
        <el-form :inline="true" :model="ysbsbyzjlForm" status-icon :rules="rules" ref="ysbsbyzjlForm" :disabled="isInput" class="demo-form-inline">
          <!-- <el-divider content-position="left">基础信息</el-divider> -->
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="日期:">
                <el-date-picker v-model="ysbsbyzjlForm.rq" align="right" type="date" placeholder="请选择日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="井状态:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入井状态"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="井号:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入井号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采油方式:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入采油方式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产时间（h:min）:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入生产时间（h:min）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="掺水压力（MPa）:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入掺水压力（MPa）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="掺水温度（oC）:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入掺水温度（oC）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回油压力（MPa）:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入回油压力（MPa）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回油温度（oC）:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入回油温度（oC）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注:">
                <el-input v-model="ysbsbyzjlForm.bc" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
         
  
  
        </el-form>
  
        <div slot="footer" class="dialog-footer" v-show="!ischeck">
          <el-button @click="close('ysbsbyzjlForm')">取 消</el-button>
          <el-button type="primary" @click="submitForm('ysbsbyzjlForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      var checkByz = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('班运转不能为空'));
        }
        setTimeout(() => {
          console.log(typeof(value))
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 0) {
              callback(new Error('请输入正数'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
  
      return {
        //tab页面
        activeName: 'third',
        // table数据
        tableData: [{
          rq: '2023-02-12',//日期
          bc: '早',//班次
          starttime: '2023-03-03 13:46:14',//启动时间
          endtime: '2023-03-03 13:46:14',//停止时间
          byz: 2,//班运转（h）
          ylj: '3',//月累计（h）
          zlj: '5',//总累计（h）
          zbr: 'srt',//值班人
        }, {
          rq: '2023-02-13',//日期
          bc: '早',//班次
          starttime: '2023-03-03 13:46:14',//启动时间
          endtime: '2023-03-03 13:46:14',//停止时间
          byz: 2,//班运转（h）
          ylj: '3',//月累计（h）
          zlj: '5',//总累计（h）
          zbr: 'srt',//值班人
        }],
        show:false,//隐藏序列
        //table数据总条数
        tableTotal: 30,
        //当前页码
        currentPage: 1,
        // 分页数
        pageSize: 5,
        
        //表单填报的数据
        ysbsbyzjlForm: {
          time: '',//日期
          bc: '',//班次
          starttime: '',//启动时间
          endtime: '',//停止时间
          byz: '',//班运转（h）
          ylj: '',//月累计（h）
          zlj: '',//总累计（h）
          zbr: '',//值班人
          
        },
        rules: {
          byz: [
            { validator: checkByz, trigger: 'blur' }
          ],
        },
        // 集油间下拉框的内容
        zyqOptions: [{ value: '1', label: '第 一 采油作业区' }, { value: '2', label: '第 二 采油作业区' }, { value: '3', label: '第 三 采油作业区' }, { value: '4', label: '第 四 采油作业区' }],
        groupOptions: [{ value: '1', label: '东162队' }, { value: '2', label: '东163队' }, { value: '3', label: '东164队' }, { value: '4', label: '东165队' }],
        jyjOptions: [{ value: '1', label: '1 号集油间' }, { value: '2', label: '2 号集油间' }, { value: '3', label: '3 号集油间' }, { value: '4', label: '4 号集油间' }],
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        //井号下拉框
        jhOptions: [{ value: '1', label: '树2-30' }, { value: '2', label: '树2-32' }, { value: '3', label: '树3-29' }, { value: '4', label: '树3-31' }],
        //井别下拉框
        jbOptions: [{ value: '1', label: '抽' },],
        //编辑框是否显示
        dialogFormVisible: false,
        //弹出框是否是查看
        ischeck: false,
        //控制查看时不可更改数据
        isInput:false,
        //弹出框标题
        myDialogTitle: '',
      }
    },
    methods: {
      //tab页
      handleClick1(tab, event) {
          console.log(tab, event);
        },
      onSubmit() {
        console.log('submit!');
      },
      //关闭对话框
      handleClose(done) {      
        // 清空表单
        this.$refs['ysbsbyzjlForm'].resetFields();
        // 清空表单校验，避免再次进来会出现上次校验的记录
        this.$refs['ysbsbyzjlForm'].clearValidate()
        done();
        
      },
       // 弹框关闭触发
      close(formName) {
        this.dialogFormVisible = false;
        // 清空表单
        this.$refs[formName].resetFields();
        // 清空表单校验，避免再次进来会出现上次校验的记录
        this.$refs[formName].clearValidate()
      },
  
      //提交表单，验证数据
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogFormVisible = false;
              this.$message({ message: '添加成功', type: 'success' });
          } else {
            console.log('error submit!!');  
            this.$message({message: '请检查输入的数据！',type: 'error'}); 
            // this.$refs.ysbsbyzjlForm.clearValidate();
            return false;
          }
        });
      },
  
      handleClick(row, handle) {
        this.dialogFormVisible = true;
        // this.$resetForm("ysbsbyzjlForm", this.ysbsbyzjlForm); //清空表单数据
  
        if (handle == 'check') {
          this.myDialogTitle = '油水泵设备运转记录'
          this.ischeck = true
          // 1.表单禁用
          this.isInput = true;
          this.ysbsbyzjlForm = row
          this.$message({ message: '成功打开', type: 'success' });
        } else if (handle == 'edit') {
          this.myDialogTitle = '油水泵设备运转记录编辑'
          this.ischeck = false
          this.isInput = false;
          this.ysbsbyzjlForm = row
          // this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle == 'add') {
          this.isInput = false;
          this.ysbsbyzjlForm ={}
          
          // this.$resetForm("ysbsbyzjlForm", this.ysbsbyzjlForm); //清空表单数据
          this.myDialogTitle = '油水泵设备运转记录填报'
          this.ischeck = false
          // this.$message({ message: '添加成功', type: 'success' });
        }
        console.log(row);
      },
      uploadData() {
        console.log('批量导入成功')
      },
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
      // 序号计算
      indexMethod (index) {
      // index默认在0开始，这里+1
        return index + 1 + (this.currentPage - 1) * this.pageSize
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: large;
    padding-left: 10px;
    margin-bottom: 16px;
    float: left;
  }
  
  //按钮组
  .myButtons {
    float: right
  }
  
  //格子的样式
  .bg-white {
    background: #ffffff;
  }
  
  
  .grid-content {
    padding: 10px;
    //margin-bottom: 10px;
    border-radius: 4px;
  }
  
  .calendar ::v-deep .el-button-group::before {
    display: none;
  }
  
  .calendar ::v-deep .el-button-group::after {
    display: none;
  }
  
  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }
  
  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  
  .el-input.is-disabled ::v-deep .el-input__inner {
    color: #606266;
  }
  .analysis-chart-card :deep(.ant-card-body) {
    padding: 14px 22px 14px 22px;
  }
  
  
element.style {
    margin-top: 0px;
}
  .elrow1 {
      //margin-bottom: 20px;
      //border: 1px solid #909399;
      //width: 500px;
      font-size: 22px;
      border-bottom: 1px solid #dfe1e4;
      &:last-child {
        margin-bottom: 0;
        //border: 1px solid #909399;
      }
    }  
    .elrow2 {
      //margin-bottom: 20px;
      //border: 1px solid #909399;
      //width: 500px;
      //border-bottom: 1px solid #dfe1e4;
      &:last-child {
        margin-bottom: 0;
        //border: 1px solid #909399;
      }
    }
    .elrow11 {
      //margin-bottom: 20px;
      //border: 1px solid #909399;
      //width: 500px;
      //height: 80px;
      font-size: large;
      border-bottom: 1px solid #dfe1e4;
      border-left: 1px solid #dfe1e4;
      border-right: 1px solid #dfe1e4;
      // &:last-child {
      //   margin-bottom: 0;k
      //   border: 1px solid #909399;
      // }
    }
    .el-col {
      border-radius: 1px;
      //height: 80px
    }
    .kuangdu{
      height: 80px;
    }
    .kuangdu3{
      height: 50px;
      border-top: #dfe1e4 1px solid;
      border-left: #dfe1e4 1px solid;
      border-right:#dfe1e4 1px solid;
      margin:0px;
      // padding-bottom: 50px;
      // vertical-align: middle;

    }
   
  
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      //background-color: #f9fafc;
    }
    .big_box{
              width: 100%;
              //height: 600px;
              //background-color: blue;
              display: flex;
              justify-content: center;/* 水平居中 */
              //align-items: center;/* 垂直居中 */
              }
          .mini_box{
              width: 40%;
              //height: 200px;
              //background-color: red;
              }
  </style>